<template>
    <div>
        <div class="riqi4">
            <span>开始时间:</span>
            <el-date-picker v-model="startDate" type="date" placeholder="选择日期"  >
            </el-date-picker>
            <span >至结束时间:</span>
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" >
            </el-date-picker>
            <!-- <el-button type="warning" plain @click="chartSubmit" >生成图表</el-button>
            <el-button type="warning" plain @click="exportDetail" >导出报表</el-button> -->
        </div>
             <!-- echarts 一定要设置宽高，否则页面不会显示出来 -->
             <div ref="mycharts" id="demoDiv"></div>
    </div>

</template>

<script>
//引用 echarts
import * as echarts from 'echarts'
import axios from '../api/index'

export default {
    name:'list4',
    data(){
        return{
            startDate:'',
            endDate:'',
            chartsInfo:[],
            chartsValue:[]
        }
    },
    methods:{
        // chartSubmit(){
        //     var param = {startDate:this.startDate,endDate:this.endDate}
        //     axios.postRequest('/detail/getDetailAmountChart',param)
        //          .then(res => {                
        //             for(let i = 0;i<res.data.length;i++){
        //                 let item = res.data[i]
        //                 this.chartsInfo.push(item.radioName)
        //                 this.chartsValue.push(item.value)
        //             }
        //             this.myCharts(this.chartsInfo,this.chartsValue)                             
        //           })
        // },
        // exportDetail(){
        //     var param = {startDate:this.startDate,endDate:this.endDate}
        //     axios.postRequest('/detail/getDetailAmountForNoneTime',param,'blob')
        //          .then(res =>{
        //             console.log("导出成功")               
        //             this.downloadFile(res,'媒体评估表.xlsx')           
        //          })
        // },
        //     //下载文件
        //     downloadFile(res, fileName) {
        //     let blob = new Blob([res.data]); //res为从后台返回的数据
        //     //let blob = new Blob([res]); 
        //     if (!fileName) {
        //         fileName = res.headers['content-disposition'].split('filename=').pop();
        //     }
        //     if ('msSaveOrOpenBlob' in navigator) {
        //         window.navigator.msSaveOrOpenBlob(blob, fileName);
        //     } else {
        //         const elink = document.createElement('a');
        //         elink.download = fileName;
        //         elink.style.display = 'none';
        //         elink.href = URL.createObjectURL(blob);
        //         document.body.appendChild(elink);
        //         elink.click();
        //         URL.revokeObjectURL(elink.href);
        //         document.body.removeChild(elink);
        //     }
        // },
        myCharts(chartsInfo,chartsValue){       
            //    let myEcharts = echarts.init(this.$refs.mycharts)
            //     //设置轴
            //     let xData = chartsInfo
            //     let yData = chartsValue
                //3.设置配置项
                let option = {
                    title:{
                        text:"节目TOP排行"
                    },
                    // xAxis:{
                    //     data:xData,
                    //     type:"category" //坐标轴的类型，value数据轴  category 类目轴
                    // },
                    // yAxis:{         
                    // },
                    // tooltip:{
                    //     trigger:"axis",
                    //     axisPointer:{
                    //         type:"cross"
                    //     }
                    // },
                    // series:[
                    //     {
                    //         name:"销售总额",
                    //         type:"bar",
                    //         data:yData,
                    //         barWidth:80 ,//数据条的宽度
                    //         //设置条形数据每条数据颜色都不一样
                    //         itemStyle:{
                    //         normal:{
                    //             color:function(params){
                    //                 return  "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                    //             }
                    //         }
                    //         },
                    //         label: {
                    //             show: true,
                    //             position: "top"
                    //         }
                    //     }
                    // ],
                }
                //4.绘制图表
                myEcharts.setOption(option)
   }
        
    },
    mounted(){
        var today = new Date();
        var year = today.getFullYear();//获取年份
        var month = today.getMonth() + 1;//获取月份
        var day = today.getDate();//获取日期
        // var minToday = year + "-" + month + "-" + day + " " + "00:00:00";
        var maxToday = year + "-" + month + "-" + day + " " + "23:59:59";

        let beforeTime = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 30); //一个月前
        var lastYear = beforeTime.getFullYear();
        var lastMonth = beforeTime.getMonth() +1;
        var lastDay = beforeTime.getDate();
        var minToday = lastYear + "-" + lastMonth + "-" + lastDay + " " + "00:00:00";
        this.startDate = minToday   
        this.endDate = maxToday
   
        // this.chartSubmit()
        // this.myCharts()
        
   },
}
</script>

<style>
#demoDiv{
    width: 100%;
    height: 800px;
    /* border: 1px solid red; */
}
.riqi4{
    margin-left: 25%;
}
</style>